---
layout: example
categories: example/v1.0.0
version: v1.0.0
title: Custom tooltip styles with CSS
description: Using a class on the map object to customize popup and tooltip themes
tags:
  - tooltips
---
<style>
/*
 * These CSS rules affect the tooltips within maps with the custom-popup
 * class. See the full CSS for all customizable options:
 * https://github.com/mapbox/mapbox.js/blob/001754177f3985c0e6b4a26e3c869b0c66162c99/theme/style.css#L321-L366
 */
.custom-popup .leaflet-popup-content-wrapper {
  background:#2c3e50;
  color:#fff;
  font-size:16px;
  line-height:24px;
  }
.custom-popup .leaflet-popup-content-wrapper a {
  color:rgba(255,255,255,0.5);
  }
.custom-popup .leaflet-popup-tip-container {
  width:30px;
  height:15px;
  }
.custom-popup .leaflet-popup-tip {
  border-left:15px solid transparent;
  border-right:15px solid transparent;
  border-top:15px solid #2c3e50;
  }
</style>
</head>
<body>
<div class='custom-popup' id='map'></div>
<script>
var map = L.mapbox.map('map', 'examples.map-zr0njcqy');
</script>
